<!--
 * @Author: xuxueliang
 * @Date: 2022-05-24 14:50:13
 * @LastEditTime: 2022-06-12 21:23:53
 * @LastEditors: xuxueliang
 * @Description: 
-->
@@include('tophead.html',{ "title":"首页", "bodyClass":"" })
@@include('header.html', { "type": "black","buttonClass":"toLink"})
<div class="bsbb por detail-page main-page">
  <div class="center por wow fadeInUp">
    <div class="bk">
      <div class="swiper-container swiper-container1">
        <div class="swiper-wrapper">
          @@for (var i = 0; i < 6; i++) {
          <div class="swiper-slide">
            ${ (
            a=['http://i.cafa.edu.cn/sub_events/media/mid_img/20215182219540.jpg','https://www.cafa.edu.cn/library/dynamic.images/h_subimg/h_cafam_11.jpg','https://www.cafa.edu.cn/library/dynamic.images/h_subimg/h_sub_v_2b.jpg']),''}
            <section style="background-image: url(${a[i%a.length]})"></section>
          </div>
          }
        </div>
        <!-- Add Pagination -->
      </div>
    </div>
  </div>
  <div class="bottom wow fadeInUp">
    <h1>发生系列</h1>
    <div class="name name1">
      陈璐
      <div class="rigth">
        <!-- zan1 > zan5 不同程度-->
        <span class="icon zan"></span><em>88</em>
        <span class="icon share"></span><em>126</em>
      </div>
    </div>
  </div>
  <div class="bk-fixed">
    <div class="por">
      <div class="swiper-container swiper-container3">
        <div class="swiper-wrapper">
          <!-- 图片和title需要渲染到 里 -->
          <div swiper-title="带发生" class="swiper-slide" style="">
            <div class="swiper-zoom-container">
              <img
                src="http://i.cafa.edu.cn/sub_events/media/mid_img/20215182219540.jpg"
                alt=""
              />
            </div>
          </div>
          <div swiper-title="第一个" class="swiper-slide" style="">
            <div class="swiper-zoom-container">
              <img
                src="http://i.cafa.edu.cn/sub_events/media/mid_img/20215182219540.jpg"
                alt=""
              />
            </div>
          </div>
          <div swiper-title="第二个" class="swiper-slide" style="">
            <div class="swiper-zoom-container">
              <img
                src="http://i.cafa.edu.cn/sub_events/media/mid_img/20215182219540.jpg"
                alt=""
              />
            </div>
          </div>
        </div>
        <!-- Add Pagination -->
        <!-- <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div> -->
      </div>
      <div class="top-fixed font-B poa row">
        <span id="nownum"></span>/<span id="allnum"></span>
        <img
          src="./assets/public/images/logo-t-black.png"
          class="logo"
          alt=""
        />
        <div class="right close"></div>
      </div>
      <div class="bottom-fixed poa row">
        <span id="names"></span>
      </div>
    </div>
  </div>
  <div class="share-fu">
    <img src="./assets/public/images/sharebk.png" alt="" />
  </div>
</div>
<div class="detailsVideo detail-de detail-de-1 flex">
  <div class="dv-main-no">
    <div class="dv-synopsis pad68">
      <!-- <div class="sy-name">给我星辰的人</div> -->
      <p class="sy-p flex wow fadeInUp">
        <span class="label tsj">演唱者</span>
        <span class="value tar">雷佳</span>
      </p>
      <p class="sy-p flex wow fadeInUp">
        <span class="label tsj">时长</span>
        <span class="value tar">5：30</span>
      </p>
      <p class="sy-p flex wow fadeInUp">
        <span class="label tsj">简介</span>
        <span class="value"
          >在这里留下了我们最美的青春芳华；这最美好的三年将令我们铭刻终身；在这里我们有过欢笑，有过苦闷；在这里我们黄灯夜读，有过美人如玉剑如虹；在这里有我们的奋斗足印，有如师如长的关怀……带着这些记忆，带着这些美好，打好行囊，带着给我星辰的人的祝福奔赴下一个未来，再见依然是星辰大海!</span
        >
      </p>
    </div>
    <div class="detail-items">
      <div class="title-style-1 wow fadeInUp">
        <div class="name name1">导师作品</div>
      </div>
      <!-- 视频链接 -->
      <a class="img-show-div play wow fadeInUp">
        <img class="" src="./assets/public/images/111111.jpg" alt="" />
      </a>
      <!-- 通用播放模块 放在学生详情页 -->
      <div class="w100 posr wow fadeInUp video-play-action">
        <div class="play wh100 bg-cover posa pos-center"></div>
        <video
        playsinline='false' webkit-playsinline='false'
          src="./assets/public/images/1、李旭拍摄的电影傍晚向日葵片花.mp4"
          poster="./assets/public/images/video.png"
          controls
          id="iVideo"
          class="wh100"
        ></video>
      </div>
    </div>
    <div class="detail-items">
      <div class="title-style-1 wow fadeInUp">
        <div class="name name1">全部作品</div>
      </div>
      <a class="img-show-div wow fadeInUp">
        <img class="" src="./assets/public/images/111111.jpg" alt="" />
      </a>
      <div class="title mb8 wow fadeInUp">《白桦之音》</div>
      <div class="desc wow fadeInUp">
        <p class="wow fadeInUp">作品类型：油画</p>
        <p class="wow fadeInUp">尺寸：200×100cm</p>
        <p class="wow fadeInUp">时间：2022年</p>
        <p class="wow fadeInUp">指导老师：郑光旭</p>

        <p class="wow fadeInUp">
          作品简介：《白桦之音》描绘了一个身着白裙的小女孩在白桦林中拉小提琴的场景。画中的小女孩是笔者的女儿，白桦林是吉林省靖宇县北部革命前辈战斗过的地方。小女孩在这里用音乐的形式怀念先烈，表达了一种崇敬之情。
          画面采用了外光写生的创作形式。白色块之间的重复与微妙差异是该作品的亮点，夏季的白桦林让整个画面呈现浓郁的绿色调，白色的连衣裙、白桦树和远处的白云形成了强烈的节奏，舞动着的白桦树枝干仿佛与小提琴产生的美妙旋律发生着某种共鸣，使作品充满鲜明的浪漫主义色彩。
        </p>
      </div>
    </div>
    <div class="detail-items">
      <div class="w100 posr wow fadeInUp video-play-action">
        <div class="play wh100 bg-cover posa pos-center"></div>
        <video
        playsinline='false' webkit-playsinline='false'
          src="./assets/public/images/1、李旭拍摄的电影傍晚向日葵片花.mp4"
          poster="./assets/public/images/video.png"
          controls
          id="iVideo"
          class="wh100"
        ></video>
      </div>
      <div class="title mb8 wow fadeInUp">《白桦之音》</div>
      <div class="desc wow fadeInUp">
        <p class="wow fadeInUp">作品类型：油画</p>
        <p class="wow fadeInUp">尺寸：200×100cm</p>
        <p class="wow fadeInUp">时间：2022年</p>
        <p class="wow fadeInUp">指导老师：郑光旭</p>

        <p class="wow fadeInUp">
          作品简介：《白桦之音》描绘了一个身着白裙的小女孩在白桦林中拉小提琴的场景。画中的小女孩是笔者的女儿，白桦林是吉林省靖宇县北部革命前辈战斗过的地方。小女孩在这里用音乐的形式怀念先烈，表达了一种崇敬之情。
          画面采用了外光写生的创作形式。白色块之间的重复与微妙差异是该作品的亮点，夏季的白桦林让整个画面呈现浓郁的绿色调，白色的连衣裙、白桦树和远处的白云形成了强烈的节奏，舞动着的白桦树枝干仿佛与小提琴产生的美妙旋律发生着某种共鸣，使作品充满鲜明的浪漫主义色彩。
        </p>
      </div>
    </div>
  </div>
</div>
@@include('footer.html')
<script>
  $(function () {
    videoInit({ videoId: "iVideo", buttonId: "iVideoPlay" });
  });
  var repeat = Math.min($(".swiper-container1 .swiper-slide").size(), 9);
  var swiper = new Swiper(".swiper-container1", {
    loop: repeat > 1,
    initialSlide: 0,
    autoplay: {
      delay: 1800, //1秒切换一次
    },
    loopedSlides: repeat,
  });
  swiper.autoplay.stop();
  setTimeout(function () {
    swiper.autoplay.start();
  }, 2000);
  var click = false;
  var swiper2 = new Swiper(".swiper-container3", {
    zoom: true, //开启缩放功能
    // navigation: {
    //   nextEl: ".swiper-button-next",
    //   prevEl: ".swiper-button-prev",
    // },
    on: {
      slideChange: function () {
        $("#nownum").text(this.activeIndex + 1);
        $("#names").text($(this.slides[this.activeIndex]).attr("swiper-title"));
      },
      init: function (swiper) {
        //Swiper初始化了
        $("#nownum").text(this.activeIndex + 1);
        $("#allnum").text(this.slides.length);
        $("#names").text($(this.slides[this.activeIndex]).attr("swiper-title"));

        // alert("当前的slide序号是" + this.activeIndex); //或者swiper.activeIndex，swiper与this都可指代当前swiper实例
        // this.emit("transitionEnd"); //在初始化时触发一次transitionEnd事件，需要先设置transitionEnd
      },
      click: function (swiper, event) {
        // $(".bk-fixed").hide();
        if (!click && event.target.className.indexOf("swiper-button") < 0) {
          click = setTimeout(function () {
            hideBg();
            click = null;
          }, 300);
        } else {
          clearTimeout(click);
          click = null;
        }
        // event.stopPropagation()
        // return false
      },
    },
  });
  // 需要知道点击的是第几个图片
  $(".detailsVideo .img-show-div img").click(function () {
    click = setTimeout(function () {
      click = null;
    }, 300);
    showBg($(".detailsVideo .img-show-div img").index($(this)));
  });
  function showBg(index) {
    swiper.autoplay.stop();
    $(".bk-fixed").show();
    swiper2.update();
    swiper2.slideTo(index, 0);
    $("#nownum").text(swiper2.activeIndex + 1);
    $("#allnum").text(swiper2.slides.length);
    $("#names").text(
      $(swiper2.slides[swiper2.activeIndex]).attr("swiper-title")
    );
    $("body").addClass("oh");
  }
  function hideBg() {
    $(".bk-fixed").hide();
    if (swiper2.zoom.scale > 1) {
      swiper2.zoom.toggle();
    }
    swiper.autoplay.start();
    setTimeout(function () {
      $("body").removeClass("oh");
    }, 300);
  }
  $(".bk-fixed .close").click(function () {
    hideBg();
  });
  $(".swiper-container1").click(function (e) {
    if ($(e.target).hasClass("no-event")) {
    } else {
      showBg(swiper.activeIndex - repeat);
    }
  });
  var isWillCanHide = false;
  var touch = { start: { x: 0, y: 0 }, end: { x: 0, y: 0 }, distance: 0 };
  $(".bk-fixed").on("touchstart", function (e) {
    if (e.originalEvent.changedTouches.length < 2) {
      isWillCanHide = true;
      touch.start.x = e.originalEvent.changedTouches[0].clientX;
      touch.start.y = e.originalEvent.changedTouches[0].clientY;
    } else {
      isWillCanHide = false;
    }
  });

  $(".bk-fixed").on("touchmove", function (e) {
    if (isWillCanHide) {
      touch.end.x = e.originalEvent.changedTouches[0].clientX;
      touch.end.y = e.originalEvent.changedTouches[0].clientY;
      if (touch.can === undefined) {
        if (
          Math.abs(touch.end.y - touch.start.y) >
          Math.abs(touch.end.x - touch.start.x)
        ) {
          touch.can = true;
        } else {
          touch.can = false;
          isWillCanHide = false;
        }
      }
      if (isWillCanHide) {
        touch.distance = Math.abs(touch.start.y - touch.end.y);
        $(".bk-fixed >.por").css({
          transition: "all 0s",
          transform:
            "translate3d(" +
            (touch.end.x - touch.start.x) +
            "px, " +
            -1 * (touch.start.y - touch.end.y) +
            "px, 0px) scale(" +
            (1 - touch.distance / window.innerHeight) +
            ")",
        });
        $(".bk-fixed ").css({
          transition: "all 0s",
          backgroundColor:
            "rgba(0,0,0," +
            (1 - Math.abs(touch.end.y - touch.start.y) / window.innerHeight) +
            ")",
        });
      }
    }
  });
  $(".bk-fixed").on("touchend", function (e) {
    $(".bk-fixed >.por").css({
      opacity: 1,
      transform: "translate3d(0,0,0) scale(1)",
      transition: "all 500ms",
    });
    $(".bk-fixed").css({
      backgroundColor: "rgba(0,0,0,1)",
      transition: "all 500ms",
    });
    if (isWillCanHide && touch.can && touch.distance > 100) {
      hideBg();
    }
    touch = { start: { x: 0, y: 0 }, end: { x: 0, y: 0 }, distance: 0 };
  });
  $(".share").click(function () {
    $(".share-fu").fadeIn();
  });
  $(".share-fu").click(function () {
    $(".share-fu").fadeOut();
  });
</script>
@@include('bottomhtml.html')
